<template>
	<view style="background: #ffffff; position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;">
		<view class="notes">
			<p><span>*</span>我的设备详细信息(My Device Details)</p>
		</view>
		<view class="uni-common-mt">
			
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">序列号：</view>
					<view class="englishInfo">Serial Number</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.serialnumber}}</text>
				</u-col>
			</u-row>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">设备类型：</view>
					<view class="englishInfo">DeviceType</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.devicetype}}</text>
				</u-col>
			</u-row>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">设备型号：</view>
					<view class="englishInfo">DeviceModel</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.devicemodel}}</text>
				</u-col>
			</u-row>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">出厂时间：</view>
					<view class="englishInfo">DeliveryTime</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.deliverytime}}</text>
				</u-col>
			</u-row>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">客户名称：</view>
					<view class="englishInfo">CustomerName</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.customername}}</text>
				</u-col>
			</u-row>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">绑定人：</view>
					<view class="englishInfo">Binder</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.binder}}</text>
				</u-col>
			</u-row>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">客户电话：</view>
					<view class="englishInfo">CustomerPhone</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.customerphone}}</text>
				</u-col>
			</u-row>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">职位：</view>
					<view class="englishInfo">Position</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.position}}</text>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	let msg;
	export default {
		data() {
			return {
				openid: '',
				user: {},
				information: {
					serialnumber: '',
					devicetype: '',  // 设备类型
					devicemodel: '', //设备型号
					deliverytime: '',  //出厂时间
					customername: '',   // 客户名称
					binder: '',         // 绑定 人
					customerphone: '',   // 客户电话 
					position: ''         // 职位
				},
				
				// currentState: 2  //步骤条当前的状态
				
			};
		},
		onLoad(option) {
			msg = JSON.parse(decodeURIComponent(option.data))
			// console.log("*********",msg.binddeviceid)
			// shuju 
			uni.request({
				url: 'https://www.smacaftersales.com:443/bindDevice/bindDevice/findBindDeviceByBinddeviceid',
				method: 'GET',
				header: {
					"Content-Type": "application/json" //请求头信息
				},
				data:{
					binddeviceid: msg.binddeviceid 
				},
				success: (res) => {
					// console.log("****  是否 绑定过设备******",res.data.data[0].devicetype)
					this.information.serialnumber = res.data.data[0].serialnumber
					this.information.devicetype = res.data.data[0].devicetype
					this.information.devicemodel = res.data.data[0].devicemodel
					this.information.deliverytime = res.data.data[0].deliverytime
					this.information.customername = res.data.data[0].customername
					this.information.binder = res.data.data[0].binder
					this.information.customerphone = res.data.data[0].customerphone
					this.information.position = res.data.data[0].position
					
				}
			})
			
			
		},
		onShow() {	
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.englishInfo{
		display: flex;
		color: #74daff;
		align-items: center;//子控件垂直居中
		justify-content: center;//子控件水平居中
	}
	.info{
		font-size: 17px;
		color: #ababab;
	}
	.user-input{
		width: 390px;
		margin: 8px auto;
		display: flex;
		.input{
			width: 260px;
			margin-left: 10px;
		}
	}
	.fenjie{
		width: 390px;
		height: 1px;
		background: #ddd;
		margin: 0 auto;
	}

	.up-button{
		width: 160px;
		height:40px;
		background: #488ac7;
		border-radius: 4px;
		font-size: 16px;
		line-height: 40px;
		color: white;
		margin-top: 30px;
	}

	.notes{
		width: 335px;
		margin: 20px auto 40px;
		font-size: 14px;
		font-weight: bold;
		span{
			color: red;
			margin-right: 4px;
		}
		p{
			color: #999;
		}
	}
	.title{
		height: 20px;
		font-size: 16px;
		font-weight: bold;
		display: flex; 
		justify-content: center;
	} 
</style>
